<template>
  <div class="notification-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <h2>通知</h2>
        </div>
      </template>
      <div v-for="item in notifications" :key="item.id" class="notification-item">
        <span>{{ item.content }}</span>
        <el-tag v-if="!item.readed" type="danger">未读</el-tag>
        <el-tag v-else type="success">已读</el-tag>
        <el-button size="small" v-if="!item.readed" @click="markRead(item.id)">标记已读</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { ref, onMounted } from 'vue'
import { notificationApi } from '@/utils/api'
import { ElMessage } from 'element-plus'

export default {
  name: 'Notification',
  setup() {
    const notifications = ref([])
    const loadNotifications = async () => {
      try {
        const res = await notificationApi.getAll()
        notifications.value = res.data
      } catch (e) {
        ElMessage.error('加载通知失败')
      }
    }
    const markRead = async (id) => {
      try {
        await notificationApi.markRead(id)
        await loadNotifications()
      } catch (e) {
        ElMessage.error('操作失败')
      }
    }
    onMounted(() => loadNotifications())
    return { notifications, markRead }
  }
}
</script>
<style scoped>
/* 保持原有样式 */
</style> 